*{
	margin: 0;
	padding: 0;
}
body{
	background: radial-gradient(circle at top,#444,#000);
	height: 100vh;
	width: 100%;
}
.usercenter-head{
	width: 100%;
	height: 130px;
	background-color: white;
	position: relative;
	left: 0;
	top: 0;
	z-index: -1;
}
.L{	
	position: absolute;
	top: 3%;
	left: 3%;
	z-index: 1;
}

	.text{
		position: absolute;
		top: 0%;
		left: 0%;
		width: 650px;
		
	    color: #fff;
	   
	    font-size: 500%;
		font-weight: 900;
	    text-transform: uppercase;
	    letter-spacing: 5px;
	    
		
	   
		 /* text-align: center; */
	}
	.text::before,
	.text::after{
	    content: "弹簧的良品铺子";
	    position: absolute;
	    top: 0%;
	    left: 0%;
	    width: 90%;
	}
	.text::before{
	    left: -3px;
	    text-shadow: -2px 0 #00ffff;
	    /* 执行动画:动画名 时长 线性的 无限次播放 反向播放 */
	    animation: fault1 1.5s linear infinite reverse;
	}
	.text::after{
	    left: -3px;
	    text-shadow: -2px 0 #ff0050;
	    animation: fault2 1.5s linear infinite reverse;
	}
	
	
	
	
	
	/* 故障动画1 */
	@keyframes fault1 {
	    0%{
	        /* --t,--b为自定义属性,通过var函数对其调用 */
	        /* 这两个数值是随机生成的,可以自己进行设定,数值不一样,抖动的效果也会不一样 */
	        --t:132px;
	        --b:101px;
	        /* 剪裁一个矩形(top,right,bottom,left) 和margin是一样的 */
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    10%{
	        --t:40px;
	        --b:66px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    20%{
	        --t:137px;
	        --b:61px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    30%{
	        --t:133px;
	        --b:74px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    40%{
	        --t:59px;
	        --b:130px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    50%{
	        --t:22px;
	        --b:67px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    60%{
	        --t:10px;
	        --b:105px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    70%{
	        --t:105px;
	        --b:13px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    80%{
	        --t:66px;
	        --b:39px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    90%{
	        --t:36px;
	        --b:128px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    100%{
	        --t:14px;
	        --b:100px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	}
	/* 故障动画2 */
	@keyframes fault2 {
	    0%{
	        --t:129px;
	        --b:36px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    10%{
	        --t:85px;
	        --b:66px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    20%{
	        --t:148px;
	        --b:138px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    30%{
	        --t:69px;
	        --b:54px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    40%{
	        --t:146px;
	        --b:34px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    50%{
	        --t:102px;
	        --b:80px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    60%{
	        --t:106px;
	        --b:99px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    70%{
	        --t:20px;
	        --b:78px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    80%{
	        --t:78px;
	        --b:52px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    90%{
	        --t:67px;
	        --b:70px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	    100%{
	        --t:83px;
	        --b:40px;
	        clip: rect(var(--t),100vw,var(--b),0px);
	    }
	}
	
.the_head{
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	/* background-color: rgb(128,128,128); */
	
}
.usercenter-head img{
	background-size: 100% 100%;
	z-index: -1;
	width: 100%;
	height: 100%;
}

.text-1{
	position: absolute;
	top: 0;
	right: 10%;
	/* background-color: aliceblue; */
	width: 45%;
	height: 100%;
	color: #FFFFFF;
}
.head-1{
	position: absolute;
	top: 50%;
	left: 8%;
}
.head-2{
	position: absolute;
	top: 50%;
	left: 23%;
}
.head-3{
	position: absolute;
	top: 50%;
	left: 43%;
}
.head-4{
	position: absolute;
	top: 50%;
	right: 8%;
}
.head-5{
	position: absolute;
	top: 50%;
	right: 30%;
}
.usercenter-body{
	background-image: url(../img/body.png);
	/* border: 5px #FF0050; */
	width: 100%;
	height: 80vh;
	background-size: 100% 100%;
	
position: relative;
	left: 0;
	top: 20px;
}

.one_body{
	background-color: rgb(255,255,255,0.3);
	width: 15%;
	height: 80%;
	top: 0;
	left: 400px;
	position: absolute;
	color: #FFFFFF;
}
.two_body{
	background-color: rgb(255,255,255,0.3);
	width: 35%;
	height: 80%;
	top: 150px;
	left: 750px;
	position: absolute;
}
.body-1{
	position: absolute;
	top: 20%;
	left: 30%;
	border-bottom: 1px solid rgb(128,128,128);
	font-family: simhei;
	/* color: #FFFFFF; */
}
.body-2{
	position: absolute;
	top: 28%;
	left: 35%;
	border-bottom: 1px solid rgb(128,128,128);
	font-family: simhei;
}
.body-3{
	position: absolute;
	top: 36%;
	left: 35%;
	border-bottom: 1px solid rgb(128,128,128);
	font-family: simhei;
}
.body-4{
	position: absolute;
	top: 44%;
	left: 35%;
	border-bottom: 1px solid rgb(128,128,128);
	font-family: simhei;
}
.body-5{
	position: absolute;
	top: 52%;
	left: 35%;
	border-bottom: 1px solid rgb(128,128,128);
	font-family: simhei;
}